<!DOCTYPE HTML>
<html>
<head>
    <title>{{$title??'保存'}} - {{$back_site_name}}</title>
    @include('innerend/common/meta')
    <style>
        #searchUserList span {
            width: 143px;
        }

        #searchUserList span:hover {
            background-color: #8fd9e0;
        }
    </style>

    <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="/static/ueditor/ueditor.all.min.js"></script>
    <script type="text/javascript" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>

    <script type="text/javascript" src="/static/innerend/plupload.full.min.js"></script>
    <script type="text/javascript">
        function get_file_fun(str, isMulti=false) {
            console.log(str);
            //实例化一个plupload上传对象
            var uploader = new plupload.Uploader({
                browse_button: str, //触发文件选择对话框的按钮，为那个元素id
                url: '/backend/deal/qiniu', //服务器端的上传页面地址
                //flash_swf_url : '/Public/static/js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
                //silverlight_xap_url : '/Public/static/js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
                filters: {
                    mime_types: [ //只允许上传图片和zip文件
                        {title: "图片文件", extensions: "jpg,gif,png,bmp"}
                    ],
                    max_file_size: '2000kb', //最大只能上传400kb的文件
                    prevent_duplicates: true //不允许选取重复文件
                }
            });

            //在实例对象上调用init()方法进行初始化
            uploader.init();

            //绑定各种事件，并在事件监听函数中做你想做的事
            uploader.bind('FilesAdded', function (uploader, files) {
                if (uploader.files.length > 1) { // 最多上传3张图
                    uploader.splice(1, 999);
                }
                uploader.start();
            });
            uploader.bind('FileUploaded', function (uploader, file, responseObject) {
                var ret = responseObject.response;
                ret = JSON.parse(ret);
                console.log(ret);
                // 如果是多个上传
                if(isMulti){
                    $("." + str).attr("src", ret.data);
                    $("." + str + "_image").val(ret.data);
                }else{
                    $("#" + str).attr("src", ret.data);
                    $("#" + str + "_image").val(ret.data);
                }

                $("#delThumb").show();
            });
        }
    </script>
</head>
<body>
<article class="page-container">
    <form action="" method="post" class="form form-horizontal" id="form-article-add">

        {!! $formHtml !!}

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button class="btn btn-primary radius" type="submit"><i class="Hui-iconfont">&#xe632;</i>
                    立即提交
                </button>
            </div>
        </div>
    </form>
</article>

@include('innerend/common/footer')
<script type="text/javascript" src="/static/jquery/jquery.form.js"></script>
<script type="text/javascript" src="/static/jquery.validation/1.14.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="/static/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="/static/jquery.validation/1.14.0/messages_zh.min.js"></script>
<script type="text/javascript" src="/static/icheck/jquery.icheck.min.js"></script>

<style>
    #searchUserList span {
        width: 143px;
    }

    #searchUserList span:hover {
        background-color: #8fd9e0;
    }
</style>
<style>
    #search_uid_List span {
        width: 143px;
    }

    #search_uid_List span:hover {
        background-color: #8fd9e0;
    }

    #search_cate_id_List span {
        width: 143px;
    }

    #search_cate_id_List span:hover {
        background-color: #8fd9e0;
    }

    #search_topic_id_List span {
        width: 143px;
    }

    #search_topic_id_List span:hover {
        background-color: #8fd9e0;
    }
</style>

<script language="javascript">
    //var ue;
    $(document).ready(function (e) {

        /*$('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '10%'
        });*/

        $("#form-article-add").validate({
            rules: {
                //name: {required: true, minlength: 2, maxlength: 50,},
                //channel: {required: true, minlength: 2, maxlength: 50,},
            },
            messages: {
                //name: {required: "名称必填！", minlength: "名称最短2位字符", maxlength: "名称不超过50位字符"},
                //channel: {required: "分类必填！", minlength: "分类最短2位字符", maxlength: "分类不超过50位字符"},
            },
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {
                //请求url
                //let formUrl = "{:url('/backend/'.$controller.'/on-'.($action=='add'?'add':'edit'))}";
                let formUrl = "{{$formUrl}}";
                $(form).ajaxSubmit({
                    type: "post",  //提交方式
                    dataType: "json", //数据类型
                    url: formUrl, //请求url
                    success: function (ret) { //提交成功的回调函数
                        if (ret.code == 200) {
                            layer.msg(ret.msg, {icon: 6, time: 2000});
                            setTimeout(function () {
                                /*关闭弹出框口*/
                                // layer_close(1);

                                /*关闭弹出框口*/
                                var index = parent.layer.getFrameIndex(window.name);
                                if (index) {
                                    // 关闭最外层 刷新父级
                                    parent.location.reload();
                                    parent.layer.close(index);
                                } else {
                                    window.location.href = '{{$init_url}}';
                                    console.log('跳转到：{{$init_url}}')
                                }
                            }, 2000);
                        } else {
                            layer.msg(ret.msg, {icon: 0, time: 2000});
                        }
                    }
                });
            }
        });
    });

    // 编辑器
    /*ue = UE.getEditor('content',{
        serverUrl :"{:url('/innerend/deal/qiniu')}"
    });*/


    // 删除图片
    $("#delThumb").on("click", function () {
        $("#thumb").attr("src", "/static/upfile.png");
        $("#thumb_image").val("");
        $("#delThumb").hide();
    });

    // 搜索
    /*function searchUser(obj){
        var keyword=$(obj).val();
        if(keyword=="")return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async:false,
            dataType: "json",
            url: "{:url('/innerend/search/user')}",
            data: {
                keyword:keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {

                if(ret.code==200){
                    var html='';
                    for(var i=0;i<ret.data.length;i++){
                        html+='<span onclick="selectUser(this)" data-id="'+ret.data[i].id+'">'+HTMLEncode(ret.data[i].username)+'</span><br/>';
                    }
                    $("#searchUserList").html(html);
                    $("#searchUserList").show();
                }else{
                    $("#searchUserList").html('');
                    $("#searchUserList").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }*/

    // 搜索（第三版本）
    function searchList(url, obj, field = 'person_id', show_id = 'id', show_label = 'username') {
        var keyword = $(obj).val();
        if (keyword == "") return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async: false,
            dataType: "json",
            url: url,
            data: {
                keyword: keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {
                if (ret.code == 200) {
                    var html = '';
                    for (var i = 0; i < ret.data.length; i++) {
                        html += '<span onclick="selectAjax(this, \'' + field + '\')" data-id="' + ret.data[i][show_id] + '">' + HTMLEncode(ret.data[i][show_label]) + '</span><br/>';
                    }
                    // search_field_List
                    $("#search_" + field + "_List").html(html);
                    $("#search_" + field + "_List").show();
                } else {
                    $("#search_" + field + "_List").html('');
                    $("#search_" + field + "_List").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }

    // 搜索：所有的搜索都可以调用的
    function ajaxSearch(url, obj, field = 'uid', id = 'id', show = 'uid') {
        var keyword = $(obj).val();
        if (keyword == "") return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async: false,
            dataType: "json",
            url: url,
            data: {
                keyword: keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {
                if (ret.code == 200) {
                    var html = '';
                    for (var i = 0; i < ret.data.length; i++) {
                        html += '<span onclick="selectAjax(this, \'' + field + '\')" data-id="' + ret.data[i][id] + '">';
                        html += HTMLEncode(ret.data[i][show]) + '(' + id + ':' + ret.data[i][id] + ')';
                        html += '</span><br/>';
                    }
                    // search_field_List
                    $("#search_" + field + "_List").html(html);
                    $("#search_" + field + "_List").show();
                } else {
                    $("#search_" + field + "_List").html('');
                    $("#search_" + field + "_List").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }

    // 搜索：待删除
    function searchUser(obj, field = 'uid') {
        var keyword = $(obj).val();
        if (keyword == "") return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async: false,
            dataType: "json",
            url: "{{url('/innerend/selector/user')}}",
            data: {
                keyword: keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {

                if (ret.code == 200) {
                    var html = '';
                    for (var i = 0; i < ret.data.length; i++) {
                        html += '<span onclick="selectAjax(this, \'' + field + '\')" data-id="' + ret.data[i].id + '">' + HTMLEncode(ret.data[i].username) + '</span><br/>';
                    }
                    // search_field_List
                    $("#search_" + field + "_List").html(html);
                    $("#search_" + field + "_List").show();
                } else {
                    $("#search_" + field + "_List").html('');
                    $("#search_" + field + "_List").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }

    // 搜索：待删除
    function searchCate(obj, field = 'cate_id') {
        var keyword = $(obj).val();
        if (keyword == "") return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async: false,
            dataType: "json",
            url: "{:url('/innerend/search/cate')}",
            data: {
                keyword: keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {
                if (ret.code == 200) {
                    var html = '';
                    for (var i = 0; i < ret.data.length; i++) {
                        html += '<span onclick="selectAjax(this, \'' + field + '\')" data-id="' + ret.data[i].id + '">' + HTMLEncode(ret.data[i].title) + '</span><br/>';
                    }
                    $("#search_" + field + "_List").html(html);
                    $("#search_" + field + "_List").show();
                } else {
                    $("#search_" + field + "_List").html('');
                    $("#search_" + field + "_List").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }

    // 搜索：待删除
    function searchTopic(obj, field = 'topic_id') {
        var keyword = $(obj).val();
        if (keyword == "") return;
        $.ajax({
            beforeSend: function () {
                //layerIdx=layer.load();
            },
            type: "POST",
            async: false,
            dataType: "json",
            url: "{{url('/innerend/search/topic')}}",
            data: {
                keyword: keyword,
                r: Math.random()
            },
            error: function (XmlHttpRequest, textStatus, errorThrown) {

            },
            success: function (ret) {
                if (ret.code == 200) {
                    var html = '';
                    for (var i = 0; i < ret.data.length; i++) {
                        html += '<span onclick="selectAjax(this, \'' + field + '\')" data-id="' + ret.data[i].id + '">' + HTMLEncode(ret.data[i].title) + '</span><br/>';
                    }
                    $("#search_" + field + "_List").html(html);
                    $("#search_" + field + "_List").show();
                } else {
                    $("#search_" + field + "_List").html('');
                    $("#search_" + field + "_List").hide();
                }
            },
            complete: function () {
                //layer.close(layerIdx);
            }
        });
    }

    // 搜索的展示
    function selectAjax(obj, field) {
        var fieldID = $(obj).attr('data-id');
        var fieldName = $(obj).text();
        //$("#sUser").val(userName);
        // hide_field_ID
        // show_field_ID
        console.log(obj)
        console.log(fieldID)
        console.log(fieldName)

        // 如果是单选择
        $("#hide_" + field + "_ID").val(fieldID);
        $("#show_" + field + "_ID").html(fieldName);
        //$("#show_" + field + "_ID").html(field + "：" + fieldID);

        // 如果是多选
        var id_field_array = $("#" + field + "").val();
        if (id_field_array) {
            let has = (id_field_array.indexOf(fieldID) > -1)
            if (!has) {
                var html = '<span class="spanList" data-id="' + fieldID + '">' + fieldName + '&nbsp;<a href="javascript:;" onclick="searchRemove(this,\'' + field + '\')"> 删</a></span>&nbsp;&nbsp;';
                $("#show_" + field + "_list").append(html);
                searchSelect(field);
            }
        }


        $("#search_" + field + "_List").html('');
        $("#search_" + field + "_List").hide();
    }

    // 搜索选择的内容
    function searchSelect(field) {
        var id_field_array = [];
        $("#search_" + field + "_List").parent().find(".spanList").each(function () {
            id_field_array.push($(this).attr('data-id'));
        })
        console.log(field, id_field_array)
        $("#" + field + "").val(JSON.stringify(id_field_array));
    }

    // 搜索选择的内容的删除
    function searchRemove(obj, field) {
        $(obj).parent().remove();
        searchSelect(field);
    }


    function HTMLEncode(html) {
        var temp = document.createElement("div");
        (temp.textContent != null) ? (temp.textContent = html) : (temp.innerText = html);
        var output = temp.innerHTML;
        temp = null;
        return output;
    }


</script>
</body>
</html>
